<template>
  <BaseDialog ref="baseDialog" title="图片裁剪" @confrim="confrim">
    <div class="image-cropper">
      <!-- 上传区域 -->
      <!-- <div class="upload-section" v-if="!imageSrc">
        <label class="upload-label">
          <input
            type="file"
            accept="image/*"
            @change="onFileSelected"
            class="file-input"
          />
          <div class="upload-box">
            <i class="fa fa-picture-o"></i>
            <p>点击或拖拽图片到此处上传</p>
            <p class="format-hint">支持 JPG、PNG、WEBP 格式</p>
          </div>
        </label>
      </div> -->

      <!-- 裁剪区域 -->
      <div class="cropper-section">
        <div class="cropper-container">
          <img id="image" src="" alt="Image" />
        </div>
      </div>

      <!-- 裁剪结果预览 -->
      <!-- <div class="preview-section" v-if="croppedImage">
        <h3>裁剪结果预览</h3>
        <div class="preview-container">
          <img :src="croppedImage" alt="裁剪结果" class="preview-image" />
        </div>
        <div class="result-actions">
          <button @click="downloadImage" class="btn btn-primary">
            下载图片
          </button>
          <button @click="clearResult" class="btn btn-cancel">重新裁剪</button>
        </div>
      </div> -->
    </div>
  </BaseDialog>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: "",
      croppedImage: "",
      cropper: null,
      file: null,
    };
  },
  methods: {
    // 选择图片文件
    onFileSelected(e) {
      const file = e.target.files[0];
      var image = document.getElementById("image");
      var reader = new FileReader();
      const _this = this;
      reader.onload = function (event) {
        image.src = event.target.result;
        _this.cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 2,
          zoomable: true,
          movable: true,
          ready: function () {
            console.log("Cropper is ready!");
          },
        });
      };
      reader.readAsDataURL(file);
    },
    open(file) {
      this.$refs.baseDialog.open();
      this.$nextTick(()=>{
        this.file = file
        this.init(file)
      })
    },
    init(file) {
      console.log(file)
      var image = document.getElementById("image");
      var reader = new FileReader();
      const _this = this;
      reader.onload = function (event) {
        image.src = event.target.result;
        _this.cropper = new Cropper(image, {
          aspectRatio: 1,
          viewMode: 2,
          zoomable: true,
          movable: true,
          ready: function () {
            console.log("Cropper is ready!");
          },
        });
      };
      reader.readAsDataURL(file);
    },
    confrim() {
      var croppedCanvas = this.cropper.getCroppedCanvas();
      var croppedImageUrl = croppedCanvas.toDataURL("image/jpeg");
      const _this = this
      croppedCanvas.toBlob((blob) => {
        if (!blob) return;
        // 转换为File对象
        const croppedFile = new File([blob], `${_this.file.name}-${Date.now()}.jpg`, {
          type: "image/jpeg",
        });
        console.log(croppedFile);
        this.$emit("success",croppedFile)
        this.close()
      });
    },
    close() {
      this.$refs.baseDialog.close();
    },
  },
};
</script>

<style scoped>
.image-cropper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 上传区域样式 */
.upload-section {
  margin-bottom: 20px;
}

.upload-label {
  display: block;
}

.file-input {
  display: none;
}

.upload-box {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-box:hover {
  border-color: #42b983;
  background-color: #f9f9f9;
}

.upload-box i {
  font-size: 48px;
  color: #999;
  margin-bottom: 15px;
}

.upload-box p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.format-hint {
  font-size: 14px;
  color: #999;
  margin-top: 8px !important;
}

/* 裁剪区域样式 */
.cropper-section {
  margin-bottom: 20px;
}

.cropper-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

.cropper-image {
  display: block;
  max-width: 100%;
}

/* 预览区域样式 */
.preview-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.preview-section h3 {
  margin-top: 0;
  color: #333;
  font-size: 18px;
}

.preview-container {
  margin: 15px 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
}

.result-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}
</style>
